<script setup>
    import { ref,toRefs,reactive, onMounted,computed} from 'vue'
    import { Plus } from '@element-plus/icons-vue'
    
    const props = defineProps({
        skus:Array
    });
    // const skus = ref(props.skus);

    const skuLists = computed(()=>{
        return props.skus;
    });
          
    const handleDelSpec = (index,item) => {
          props.skus.splice(index,1);
     }

    defineExpose({
        skuLists
    })
    </script>
    <template>
            <el-table :data="skuLists" style="width: 100%">
                <el-table-column prop="spec" label="规格" width="180" />
                <el-table-column prop="price" label="价格" width="180">
                    <template #default="scope">
                        <el-input v-model="scope.row.price" placeholder="请输入价格" />
                    </template>
                </el-table-column>
                <el-table-column prop="store" label="库存">
                     <template #default="scope">
                        <el-input v-model="scope.row.store" placeholder="请输入库存" />
                    </template>
                </el-table-column>
                <el-table-column  label="操作" width="180">
                     <template #default="scope">
                        <el-button type="danger" @click="handleDelSpec(scope.$index,scope.row.item)">删除</el-button>
                    </template>   
                </el-table-column>

              </el-table>
    </template>